<template>
  <div class="setting-column">
    <el-table ref="table" :data="usercolumn" :key="toggleIndex" height="400">
      <el-table-column label="" width="58">
        <template #default>
          <el-tag class="move" style="cursor: move">
            <DCaret style="width: 1em; height: 1em" />
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="hide" label="显示">
        <template #default="scope">
          <el-switch
            v-model="scope.row.hide"
            :active-value="false"
            :inactive-value="true"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="label" label="名称"></el-table-column>
      <el-table-column prop="fixed" label="固定列">
        <template #default="scope">
          <el-select
            size="small"
            v-model="scope.row.fixed"
            clearable
            placeholder="请选择："
          >
            <el-option
              v-for="item in fixList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="width" label="宽度">
        <template #default="scope">
          <el-input
            v-model="scope.width"
            placeholder="auto"
            size="small"
          ></el-input>
        </template>
      </el-table-column>
    </el-table>
    <sc-title style="margin-top: 20px" title="排序设置"></sc-title>
    <sc-form-table
      v-model="sortFieldList"
      :addTemplate="sortFieldsTemplate"
      height="300"
      dragSort
    >
      <el-table-column label="字段名">
        <template #default="scope">
          <el-select v-model="scope.row.prop" clearable placeholder="请选择：">
            <el-option
              v-for="item in usercolumn"
              :key="item.prop"
              :label="item.label"
              :value="item.prop"
            >
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="排序方式">
        <template #default="scope">
          <el-select v-model="scope.row.order" clearable placeholder="请选择：">
            <el-option
              v-for="item in orderList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
      </el-table-column>
    </sc-form-table>
    <div class="setting-column__bottom">
      <el-button @click="reset">恢复默认设置</el-button>
      <el-button @click="save" type="primary">保存</el-button>
    </div>
  </div>
</template>

<script setup>
import Sortable from "sortablejs";
import { onMounted, ref, watch, defineModel, nextTick } from "vue";
import { DCaret } from "@element-plus/icons-vue";
const emit = defineEmits(["updateColumn"]);
import API from "@/api/model/report.js";
const table = ref(null);
const toggleIndex = ref(0);
const props = defineProps({
  fileName: { type: String, default: "" },
});
// const usercolumn = defineModel()
const usercolumn = ref([]);
const sortFieldList = ref([]);
const orderList = [
  { label: "升序", value: "ascending" },
  { label: "降序", value: "descending" },
];
const fixList = [
  { value: "left", label: "左" },
  { value: "right", label: "右" },
];
const sortFieldsTemplate = {
  prop: "",
  order: "",
};
onMounted(() => {
  rowDrop();
  getInit();
});
const getInit = async () => {
  let res = await API.userconfigDetail.post({ fileName: props.fileName });
  if (res.code == 200) {
    usercolumn.value = res.columnList;
    sortFieldList.value = res.sortFieldList ? res.sortFieldList : [];
  }
};
const rowDrop = () => {
  const tbody = table.value.$el.querySelector(".el-table__body-wrapper tbody");
  Sortable.create(tbody, {
    handle: ".move",
    animation: 300,
    ghostClass: "ghost",
    onEnd({ newIndex, oldIndex }) {
      const tableData = usercolumn.value;
      const currRow = tableData.splice(oldIndex, 1)[0];
      tableData.splice(newIndex, 0, currRow);
      toggleIndex.value += 1;
      nextTick(() => {
        rowDrop();
      });
    },
  });
};
const reset = async() =>{
  let res = await API.doRestoreDefaultSettings.post({
    fileName:props.fileName
  })
  if(res.code == 200){
    getInit()
  }
}
const save = async () => {
  let res = await API.updateUserconfig.post({
    fileName: props.fileName,
    sortFieldList: sortFieldList.value,
    columnList: usercolumn.value,
  });
  if (res.code == 200) {
    emit("updateColumn");
  }
};
</script>

<style scoped>
.setting-column__title {
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 15px;
}

.setting-column__title span {
  display: inline-block;
  font-weight: bold;
  color: #909399;
  font-size: 12px;
}

.setting-column__title span.move_b {
  width: 30px;
  margin-right: 15px;
}

.setting-column__title span.show_b {
  width: 60px;
}

.setting-column__title span.name_b {
  width: 140px;
}

.setting-column__title span.width_b {
  width: 100px;
  margin-right: 15px;
}

.setting-column__title span.sortable_b {
  width: 100px;
}

.setting-column__title span.fixed_b {
  width: 100px;
}

.setting-column__list {
  max-height: 314px;
  overflow: auto;
}

.setting-column__list li {
  list-style: none;
  margin: 10px 0;
  display: flex;
  align-items: center;
}

.setting-column__list li > span {
  display: inline-block;
  font-size: 12px;
}

.setting-column__list li span.move_b {
  width: 30px;
  margin-right: 15px;
}

.setting-column__list li span.show_b {
  width: 60px;
}

.setting-column__list li span.name_b {
  width: 140px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: default;
}

.setting-column__list li span.width_b {
  width: 60px;
  margin-right: 15px;
}

.setting-column__list li span.sortable_b {
  width: 60px;
}

.setting-column__list li span.fixed_b {
  width: 60px;
}

.setting-column__list li.ghost {
  opacity: 0.3;
}

.setting-column__bottom {
  border-top: 1px solid #ebeef5;
  padding-top: 20px;
  text-align: center;
}

.dark .setting-column__title {
  border-color: var(--el-border-color-light);
}

.dark .setting-column__bottom {
  border-color: var(--el-border-color-light);
}
</style>
